<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>首页</title>
    <script src="js/vue/dist/vue.min.js"></script>
    <script src="js/element-ui/lib/index.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/web-util.js"></script>
    <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
<div id="app" v-cloak class="main">
    <template>
        <el-container>
            <el-header class="header">
                <el-row class="header_el_row">
                    <el-col :span="4"><div class="el-icon-monitor">管理系统</div></el-col>
                    <el-col :span="12"><div></div></el-col>
                    <el-col :span="6" class="user_info" v-text="userName"></el-col>
                    <el-col :span="1" class="user_info el-icon-s-home">
                        <el-button type="text" @click="toHome" style="color: #ffffff">首页</el-button>
                    </el-col>
                    <el-col :span="1" class="user_info el-icon-switch-button">
                        <el-button type="text" @click="logout" style="color: #ffffff">退出</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside :width="sideWidth">
                    <el-menu class="el-menu" :collapse="isCollapse">
                        <template v-for="level1 in menus">
                            <el-submenu :index="level1.menuCode" :key="level1.menuCode" @click="onMenuClick(level1)">
                                <template slot="title">
                                    <span slot="title">{{level1.menuName}}</span>
                                </template>
                                <template v-for="level2 in level1.children">
                                    <el-menu-item :index="level2.menuCode" :key="level2.menuCode" @click="onMenuClick(level2)">{{level2.menuName}}</el-menu-item>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main style="overflow: hidden;">
                    <el-tabs v-model="tabActiveValue" closable @tab-remove="removeTab" @tab-click="clickTab" style="background: #ffffff;height: 45px">
                        <el-tab-pane
                                v-for="(item, index) in tabs"
                                :key="item.menuName"
                                :label="item.menuName"
                                :name="item.menuName">
                        </el-tab-pane>
                    </el-tabs>
                    <iframe :src="mainPath" v-bind:style="{width: mainWidth, height: mainHeight, border: 0, margin:0, padding:0}"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </template>
</div>

<script type="text/javascript" src="./home.js"></script>
</body>
</html>